<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- <script>
 /*
    原型继承
      缺点：1、果一个实列对象改变了父对象的引用的数据，会反应到所有子类型上。
            2、在创建实例对象的时候无法传参
 */
    function Person() {
      this.name = '小红'
      this.age = 18
      this.list=['1']
      this.sayHi = function() {
        console.log('sayHi');
      }
    }
    Person.prototype.get = function() {
      console.log('我是原型里面的get方法');
    }

    function Child() {}
    Child.prototype = new Person()

    var ch1 = new Child()
    ch1.list.push('2')
    ch1.name = 'zll1'
    console.log(ch1.name);
    console.log(ch1.list);
    ch1.get()
    
    console.log('-----------');
    var ch2 = new Child(444)
    console.log(ch2.name);
    console.log(ch2.list);
     ch2.get()
  </script> -->
  <!-- <script>
    /**
     * 构造函数继承
     * 优点：1、子类实例修改父类实例不会影响其他实例
              2、可以传参
     * 缺点：
     *  1、原型中定义的方法也无法继承
     * 
     * */
     function Person() {
      this.name = '小红'
      this.age = 18
      this.list=['1']
      this.sayHi = function() {
        console.log('sayHi');
      }
    }
    Person.prototype.get = function() {
      console.log('我是原型里面的get方法');
    }

    function Child() {
      Person.call(this)
    }

    var ch1 = new Child()
    ch1.list.push('2')
    ch1.name = 'zll1'
    console.log(ch1.name);
    console.log(ch1.list);
    // ch1.get() // 报错，找不到prototype上方法
    
    console.log('-----------');
    var ch2 = new Child(444)
    console.log(ch2.name);
    console.log(ch2.list);
    //  ch2.get()// 报错，找不到prototype上方法
  </script> -->
   <!-- <script>
/**
 * 组合继承
 * 优点：
 *  1、子类实例修改父类实例不会影响其他实例
 *  2、可以传参
 * 缺点：
 *  1、调用了两次父类构造函数，生成了两份实例
 * */
     function Person(num) {
      this.name = '小红'
      this.age = num?18+num:18
      this.list=['1']
      this.sayHi = function() {
        console.log('sayHi');
      }
    }
    Person.prototype.get = function() {
      console.log('我是原型里面的get方法');
    }

    function Child(num) {
      Person.call(this,num)
    }
    Child.prototype = new Person()
    var ch1 = new Child(3)
    ch1.list.push('2')
    ch1.name = 'zll1'
    console.log(ch1.age);
    console.log(ch1.list);

    ch1.get()
    console.log('ch1',ch1)
    
    console.log('-----------');
    var ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.list);
     ch2.get()
     console.log('ch2',ch2)
  </script> -->

  <!-- <script>
    /**
     * 寄生组合继承
     * 优点：
     *  1、子类实例修改父类实例不会影响其他实例
     *  2、可以传参
     *  3、也不会被拷贝成两份
     * 缺点：
     * 
     */

     function Person(num) {
      this.name = '小红'
      this.age = num?18+num:18
      this.list=['1']
      this.sayHi = function() {
        console.log('sayHi');
      }
    }
    Person.prototype.get = function() {
      console.log('我是原型里面的get方法');
    }

    function Child(num) {
      Person.call(this,num)
    }
    function F(){}
    F.prototype = Person.prototype
    Child.prototype = new F()
    var ch1 = new Child(3)
    ch1.list.push('2')
    ch1.name = 'zll1'
    console.log(ch1.age);
    console.log(ch1.list);

    ch1.get()
    console.log('ch1',ch1)
    
    console.log('-----------');
    var ch2 = new Child()
    console.log(ch2.age);
    console.log(ch2.list);
     ch2.get()
     console.log('ch2',ch2)
  </script> -->
  <script>
    /** es6
     * class继承
     * 优点：
     *  1、子类实例修改父类实例不会影响其他实例
     *  2、可以传参
     *  3、也不会被拷贝成两份
     * 缺点：
     * */

     class Person {
      constructor(num) {
        this.name = '小红'
        this.age = num?18+num:18
        this.list=['1']
        this.sayHi = function() {
          console.log('sayHi');
        }
      } 
      get() {
        console.log('我是原型里面的get方法'); 
      }
     }
     class Child extends Person {
      constructor(num) {
        super(num)
      } 
     }
     var ch1 = new Child(3)
     ch1.list.push('2')
     ch1.name = 'zll1'
     console.log(ch1.age);
     console.log(ch1.list);

     ch1.get()
     console.log('ch1',ch1)

     console.log('-----------');
     var ch2 = new Child()
     console.log(ch2.age);
     console.log(ch2.list);
      ch2.get()
      console.log('ch2',ch2)
  </script>

  <script>
    综上所述最优：es5:寄生组合继承，es6：class继承
  </script>
</body>
</html>